<template>
    <div>
        <h1>这是 App 组件</h1>
        
        <mt-button type="default" size="small" disabled>default</mt-button>
        <mt-button type="default" size="small">default</mt-button>
        <mt-button type="primary" size="normal">primary</mt-button>
        <mt-button type="danger" size="large"> danger</mt-button>

        <h2>幽灵按钮</h2>
        <mt-button type="primary" size="normal" plain>plain button</mt-button>

        <h2>带图标的按钮</h2>
        <mt-button type="primary" size="normal" icon='more'>more</mt-button>
        <mt-button type="primary" size="normal" icon='back'>back</mt-button>

        <h2>按钮 click</h2>
        <mt-button type="primary" size="normal"  @click="myClick">click</mt-button>

        <mt-button type="default">
            <img src="../images/阿斗.jpg" width="20" height="20" slot="icon"/>
            自定义图标按钮
        </mt-button>
    </div>
</template>

<script>

import { Toast } from 'mint-ui';

export default {
    data() {
        return {
            toastInstance: null
        }
    },
    methods:{
        myClick(){
           console.log("----click") 

           Toast('middle 提示信息上')

           this.toastInstance = Toast({
                message:"bottom 提示新",
                position:'bottom',
                duration: -1,
                iconClass: 'bi-alarm'
           })

           Toast({
                message:'top 操作成功',
                position:'top',
                duration: 5000,
           })
        }
    }
}
</script>

<style></style>